<script setup lang="ts">
import { useMapStore } from "@/store";
import { useMap } from "@/views/pipe-network/components/Map/index.vue";

defineProps({
  tableData: {
    type: Array,
  },
});
const store = useMapStore();
const viewMore = (data: any) => {
  const map = useMap();
  if (data?.coordinates?.length > 1) {
    store.setEditingPipeLine(data);
    const bounds = L.polyline(data.coordinates).getBounds();
    map.fitBounds(bounds);
  } else {
    ElMessage.error("此数据坐标缺失，无法查看！");
  }
};
const getField = (data: any, field: string) => {
  const { lineAttribute } = data
  if (Array.isArray(lineAttribute)) {
    const obj = lineAttribute.find((item: any) => item.attr === field)
    if (obj) {
      return obj.value
    }
  }
  return ''
}
</script>

<template>
  <el-table :data="tableData" style="width: 100%" class="pipe-table">
    <el-table-column label="序号" width="55">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.index }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管段类型" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.className"
              placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
                scope.row.className
              }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管段编号" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.lineGisNo"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
              scope.row.lineGisNo
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管段名称" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.lineName"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
              scope.row.lineName
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="长度(km)" width="70">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="(scope.row.length / 1000).toFixed(2)"
            placement="top"
          >
            <span style="margin-left: 10px" class="label"
              >{{ (scope.row.length / 1000).toFixed(2) }}千米</span
            >
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管径" width="65">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="getField(scope.row, '管径')"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
                getField(scope.row, '管径')
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管材" width="65">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="getField(scope.row, '管材')"
              placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
                getField(scope.row, '管材')
              }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="65">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-button size="small" @click="viewMore(scope.row)">查看</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.pipe-table {
  :deep(.cell) {
    text-align: center;
  }
}

.label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
